<template>
	<el-form :rules="pushDataRules" :model="pushData" ref="pushData" label-width="100px" style="margin:20px;width:60%;min-width:600px;">
		<el-form-item label="发送模版" prop="value">
			<el-select v-model="pushData.value" @visible-change="initSelect" filterable placeholder="请选择">
				<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="发送用户" :required="!pushData.isAll" prop="pushUserValue">
			<el-select v-model="pushData.pushUserValue" @visible-change="initUserSelect" multiple placeholder="请选择">
				<el-option
						v-for="item in pushUserOptions"
						:key="item.value"
						:label="item.label"
						:value="item">
				</el-option>
			</el-select>
		</el-form-item>
    <el-form-item
        label="发送全部用户"
        prop="isAll">
      <el-switch
          v-model="pushData.isAll"
          active-color="#13ce68"
      ></el-switch>
    </el-form-item>
    <el-form-item>
			<el-button type="primary" @click="pushMessage">发送通知</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import { getTemplateListPage, getUserListPage, pushMessage } from '../../api/api';

	export default {
		data() {
			return {
				options: [
					{
						value:'',
						label: "",
					}
				],
				pushUserOptions: [
					{
						value:'',
						label: "",
					}
				],
				pushData: {
					pushUserValue: [],
					value: null,
          isAll: false,
				},
				pushDataRules: {
          pushUserValue: [
          	{ type: 'array',
              validator: (rule, value, callback) => {
                if (value.length == 0 && this.pushData.isAll == false) {
                  callback(new Error('请选择发送的用户'));
                } else {
                  callback();
                }
              },
              trigger: 'change',
            },
          ],
					value: [
						{ type: 'object', required: true, message: '请选择发送的模版', trigger: 'blur' }
					]
				},
			}
		},
		methods: {
			pushMessage: function () {
                this.$refs.pushData.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认发送吗？', '提示', {}).then(() => {
                            let userIds = [];
                            if (this.pushData.pushUserValue.length > 0 ) {
                              for (let index in this.pushData.pushUserValue) {
                                userIds.push(this.pushData.pushUserValue[index].value);
                              }
                            }
                            let parameter = {
                                userIds: userIds,
                                templateId: this.pushData.value.value,
                                isAll: this.pushData.isAll
                            };
                            pushMessage(parameter).then((res) => {
                                this.$message({
                                    message: '发送成功',
                                    type: 'success'
                                });
                                this.$refs['pushData'].resetFields();
                            });
                        });
                    }
                });
			},
			initSelect: function(isCheck) {
				if (isCheck) {
					getTemplateListPage({limit: 10000}).then((res) => {
						let data = [];
						for(let index in res.data.templates) {
							console.log(index);
							console.log(res.data.templates);
							console.log(res.data.templates[index].title);
							data.push({
								value: res.data.templates[index].id,
								label: res.data.templates[index].title
							});
						}
						this.options = data;
					});
				}
			},
			initUserSelect: function (isCheck) {
				if (isCheck) {
					getUserListPage({limit: 10000}).then((res) => {
						let data = [];
						for (let index in res.data.users) {
							data.push({
								value: res.data.users[index].id,
								label: res.data.users[index].nickname
							});
						}
						this.pushUserOptions = data;
					});
				}
			},
		}
	}

</script>